<template>
  <div class="right">
    <div class="header hcenter">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/welcome' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">欢迎体验vue3全栈课程</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-dropdown @command="handleCommand">
        <span class="el-icon-bell">
          <span style="margin-left:15px; color: #409EFF;">{{$store.getters.getUserInfo.userName}}</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>邮箱：{{$store.getters.getUserInfo.userEmail}}</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <router-view></router-view>
    <div v-show="$route.path === '/welcome'" class="welcome">
      <div class="content">
         <div class="sub-title">欢迎体验</div>
         <div class="title">慕课通用后台管理系统</div>
         <div class="desc">Vue3.0+ElementPlus+Node+Mongo打造通用后台管理系统</div>
      </div>
      <div class="img"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      if (command == 'logout') {
        this.$store.dispatch('handlelogout');
      }
    },
  },
};
</script>
